<template>
  <view id="userinfo">
    <view class="body">
      <view class="son">
        <view class="sonleft">收货人</view>
        <view class="sonright">
          <input type="text" v-model="editedName" placeholder="请输入收货人" />
        </view>
      </view>

      <view class="son">
        <view class="sonleft">性别</view>
        <view class="sonright">
          <view
            class="man"
            :class="{ manactive: selectman === i }"
            v-for="(item, i) in manlist"
            :key="i"
            @click="showman(i)"
            >{{ item.name }}</view
          >
        </view>
      </view>

      <view class="son">
        <view class="sonleft">联系方式</view>
        <view class="sonright">
          <input
            type="text"
            v-model="editedPhoneNumber"
            placeholder="请输入收货人联系方式"
          />
        </view>
      </view>

      <view class="son">
        <view class="sonleft">收货地址</view>
        <view class="sonright">
          <input
            type="text"
            v-model="editedAddress"
            placeholder="请选择收货地址"
          />
        </view>
      </view>

      <view class="son">
        <view class="sonleft">门牌号</view>
        <view class="sonright">
          <input
            type="text"
            v-model="editedSite"
            placeholder="请输入收货人详细地址吧"
          />
        </view>
      </view>
    </view>

    <view class="botbox">
      <u-button class="botbut" @click="saveChanges()">保存</u-button>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { onLoad } from "@dcloudio/uni-app";

const store = useStore();
const route = useRoute();
const llindex = ref('');
const editedName = ref("");
const editedAddress = ref("");
const editedPhoneNumber = ref("");
const editedSite = ref("");
const editedSex = ref("");

onLoad((e) => {
  // console.log(e.index,222)
  // 获取要编辑的地址的索引
  const addressIndex = e.index;
  console.log(addressIndex, 226);
  llindex.value = addressIndex;
  // 根据索引获取要编辑的地址信息
  const editAddress = store.state.addressList[llindex.value];

  // 将地址信息填充到输入框中
  editedName.value = editAddress.name;
  editedAddress.value = editAddress.address;
  editedPhoneNumber.value = editAddress.phone;
  editedSite.value = editAddress.site;
  editedSex.value = editAddress.sex;
});

const saveChanges = () => {
  // 更新地址信息
  store.state.addressList[llindex.value] = {
    name: editedName.value,
    address: editedAddress.value,
    phone: editedPhoneNumber.value,
    site: editedSite.value,
    sex: editedSex.value,
  };

  // 跳转回地址列表页面
  uni.navigateBack();
};

const manlist = ref([
  {
    name: "先生",
    check: true,
  },
  {
    name: "女士",
    check: false,
  },
]);

// 选择性别
const selectman = ref(0);
const showman = (i) => {
  manlist.value.forEach((item, index) => {
    item.check = index === i;
  });
  selectman.value = manlist.value.findIndex((item) => item.check);
  const itemName = manlist.value[i].name;
  editedSex.value = itemName;
};
</script>

<style lang="scss">
#userinfo {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background-color: #f0f8fa;
  padding-top: 20rpx;
  .botbox {
    width: 100%;
    height: 120rpx;
    position: fixed;
    bottom: 0;
    .botbut {
      width: 88%;
      margin: auto;
      background-color: #adb838;
      color: #fff;
      border-radius: 50rpx;
    }
  }
  .body {
    width: 94%;
    margin: auto;
    background-color: #fff;
    .son {
      width: 100%;
      height: 100rpx;
      background-color: #fff;
      border-bottom: solid 3rpx #f1f1f1;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      box-sizing: border-box;
      .sonleft {
        width: 180rpx;
      }
      .sonright {
        flex: 1;
        display: flex;
        input {
          height: 100%;
          border: none;
          outline: none;
          font-size: 26rpx;
          color: #959698;
        }
        .man {
          display: inline-block;
          border: solid 2rpx #959698;
          padding: 10rpx 30rpx;
          margin-right: 20rpx;
          border-radius: 8rpx;
          color: #959698;
        }
        .manactive {
          display: inline-block;
          border: solid 2rpx #959698;
          padding: 10rpx 30rpx;
          margin-right: 20rpx;
          border-radius: 8rpx;
          color: #fff;
          background-color: #adb838;
        }
      }
    }
  }
}
</style>
